<span style="font-size:20px;"><!DOCTYPE html>
<html>
  <!--<script src="http://unpkg.com/axios/dist/axios.min.js?randomId=<%=Math.random()%"></script>-->
  <!--<script src="http://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>-->
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" /><!--1. 使设备浏览网页使不启用电话功能-->
    <meta name="apple-mobile-web-app-capable" content="yes"><!--  1. 网站开启对web app 程序的支持 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"><!--1. 在web app应用下状态条（屏幕顶部条）的颜色； 2. 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <link rel="apple-touch-icon-precomposed" href="http://cdn.66173.cn/niuguo/img/gam4.png" />
    <meta name="apple-touch-fullscreen" content="yes"><!--1. meta的作用就是删除默认的苹果工具栏和菜单栏-->
<title>Vue</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js?randomId=<%=Math.random()%"></script>
    <!--<script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>-->
    <script  src="https://lib.baomitu.com/vue/2.5.17-beta.0/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css?randomId=<%=Math.random()%">
    <script src="http://unpkg.com/element-ui/lib/index.js?randomId=<%=Math.random()%"></script>
    <!--<script src="https://unpkg.com/vuex@1.0.1/dist/vuex.js"></script>-->
<!--</head>-->
<style>
    .active{
         color: red;
     }
    .active2{
        color:blue;
    }
    body{
        max-width: 35.55555555555556rem;
        max-height:50rem;
        font-size:1rem;
        overflow:scroll;
        position: relative;
        padding: 0px;margin:0rem auto;
        -ms-touch-action: none

    }
    .btn{
        width: 70px;height: 40px;line-height: 40px;text-align: center;

    }
</style>
<body>
<div id="app" style="width: 100%;height:auto">
   <el-table
           :data="tableData"
           stripe
           style="width: 100%">
    <el-table-column
            prop="date"
            label="日期"
            width="180">
    </el-table-column>
    <el-table-column
            prop="name"
            label="姓名"
            width="180">
    </el-table-column>
       <el-table-column
               prop="name"
               label="姓名"
               width="180">
    </el-table-column>
          <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
    </el-table-column>
          <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
    </el-table-column>
    <el-table-column
            prop="address"
            label="地址">
    </el-table-column>

    <el-table-column
            prop="upload_img"
            label="图片" >

          <template scope="scope" >
            <img :src="scope.row.upload_img" @click="dayin"   width="120" height="80" onload="formatter_upload_img('scope.row.upload_img');" />
          </template>
    </el-table-column>
  </el-table>
</div>
<div id="app2">
    <p :class="{ active: isActive,active2: isActive2}">
        点击按钮切换显示的图标
    </p>
    <input class="btn" type="button" v-on:click="set1" v-if="data1" value="【一个图标】"/>
    <input class="btn" type="button" v-on:click="set1" v-if="!data1" value="另外一个图标"/>
   <hr/>
    <p>点击不同按钮决定显示什么</p>
    <input class="btn" type="button" @click="set2('baidu')" value="百度">
    <input class="btn" type="button" @click="set2('qq')" value="腾讯">
    <input class="btn" type="button" @click="set2('taobao')" value="淘宝">
    <button class="btn" @click="set2">什么都不显示</button>
    <p>
        <a href="http://www.baidu.com" target="_blank" v-if="data2=='baidu'">百度1</a>
        <a href="http://www.qq.com" target="_blank" v-if="data2=='qq'">腾讯1</a>
        <a href="http://www.taobao.com" target="_blank" v-if="data2=='taobao'">淘宝1</a>
    </p>
   <hr/>
    <p>
        同类型dom，典型的是表格，类似的有li。<br>
        <button class="btn" @click="set3">点击添加内容</button>
    </p>
    <ul>
        <li v-for="i in data3">{{i}}{{data4}}</li>
    </ul>
</div>
<input type="file" id="file" style="display:none;" onchange="filechange(event)">
<img src="http://img.shein.com/images2/2018/05/09/15258522023136879796.png" width="200px" height="200px" id="img-change">
<button class="btn" id="btn">保存图片</button>
 <!--<script  src="https://lib.baomitu.com/vue/2.5.17-beta.0/vue.js"></script>-->


<script>
    <!--图片上传-->
    $("#img-change").click(function () {
        $("#file").click();
    })
    /*$("#file").change(function (event) {*/
    var filechange=function(event){
        var files = event.target.files, file;
        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];// 文件大小校验的动作
            if(file.size > 1024 * 1024 * 2) {
                alert('图片大小不能超过 2MB!');
                return false;
            }
            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url
            var imgURL = URL.createObjectURL(file);
            //用attr将img的src属性改成获得的url
            $("#img-change").attr("src",imgURL);
            // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
            // URL.revokeObjectURL(imgURL);
        }
    };
    $("#btn").click(function () {
        $.ajax({
            url: '/imgUpload',
            fileElementId:'file',
            dataType:'txt',
            secureuri : false,
            success: function (data){
                var data=1
                if(data=="1"){
                    alert("上传成功")
                }
            },
            error:function(data,status,e){
                alert(e);
            }
        });
    });
</script>
<script>
    <!--vue引用示例-->
 var testVue = new Vue({
     el:'#app',
     data(){
         return {
             tableData: [{
                 date: '2016-05-02',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄',
                 upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
             }, {
                 date: '2016-05-04',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1517 弄',
                 upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
             }, {
                 date: '2016-05-01',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1519 弄',
                 upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
             }, {
                 date: '2016-05-03',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1516 弄',
                 upload_img:"http://img.shein.com/images2/2018/05/09/15258522023136879796.png"
             }]
         }
     },
     methods:{
       dayin:function(){
          console.log(1111111111)
       }
     }
 });
 new Vue({   //创建一个Vue的实例
     el: "#app2", //挂载点是id="app"的地方
     data:{
         data1: true,
         data2: "",
         data3: [1],
         data4:"88888",
         isActive:true,
         isActive2:false
     },
     methods: {
         set1: function () {
             this.data1 = !this.data1;
             this.isActive=!this.isActive
             this.isActive2=!this.isActive2
             // $('.pppp').css("color","red")
         },
         set2: function (arg) {
             this.data2 = arg;
         },
         set3: function (arg) {
             this.data3.push(this.data3.length + 1);
         }
     }
 })
 function formatter_upload_img(value){
 };
</script>
</body>
</html></span>